<template>
<div class="bg-grey-10">

    <q-card v-if="effectList.length>0 && !isLoading" flat square class="q-px-sm transparent ">
        <div class="row wrap bg-transparent ">
            <div v-for="(item, index) in effectList" :key="index" class="bg-hide q-pa-sm no-border col-6 col-sm-4 col-md-3 col-lg-3 col-xl-2">

                <q-card class="shadow-10" @click.prevent="handlePreviewDialog(item)">

                    <q-responsive :ratio="16 / 9" ref="previewContainer">
                        <div class="q-pa-none bg-grey-10">

                            <canvas v-show="item.isPreview" class="fit" :ref="item.effect_id"></canvas>
                            <q-img ref="poster" v-show="!item.isPreview" fill :src="item.effectPath+'/poster.jpg'" class="bg-transparent" contain basic></q-img>

                            <q-icon v-if="!$platform.inDesktop() && !item.isPreview" @click.stop="handlePhonePreview(item)" size="25px" style="position: absolute; top: 2px; right: 0; backdrop-filter: blur(5px);" name="mdi-gesture-double-tap"></q-icon>
                            <q-icon v-if="!$platform.inDesktop() && item.isPreview" @click.stop="handlePhoneStop(item)" size="25px" style="position: absolute; top: 2px; right: 0; backdrop-filter: blur(5px);" name="mdi-pause-circle-outline"></q-icon>
                            <q-inner-loading :showing="item.previewLoading" class="bg-grey-10">
                                <q-spinner-gears size="50px" color="primary" />
                                预览加载中
                            </q-inner-loading>
                            <q-btn v-if="item.el_id" flat dense round style="position: absolute; top: 2px; left: 2px; " @click.stop="handleRemoveLike(item)" icon="mdi-heart" color="red"> </q-btn>
                            <q-btn v-if="item.el_id==null" flat dense round style="position: absolute; top: 2px; left: 2px; " @click.stop="handleLike(item)" icon="mdi-heart-outline"> </q-btn>
                            <q-btn v-if="item.ec_id" flat dense round style="position: absolute; top: 2px; left: 35px; " @click.stop="handleRemoveCollection(item)" icon="mdi-shape-rectangle-plus" color="red"> </q-btn>
                            <q-btn v-if="item.ec_id==null" flat dense round style="position: absolute; top: 2px; left: 35px; " @click.stop="handleCollection(item)" icon="mdi-shape-rectangle-plus"> </q-btn>
                            <q-badge v-if="item.isLoad==1" align="middle" class="q-ma-sm q-pa-xs text-bold" style="
                            position: absolute;
                            top: 2px;
                            right: 0;
                            backdrop-filter: blur(5px);
                            filter:drop-shadow(1px 1px 3px rgb(49, 49, 49))
                          " outline color="green-4">
                                已加载
                            </q-badge>

                            <!-- <q-icon   size="20px" style="p sition: absolute; top: 2px; left: 2px; backdrop-filter: blur(5px);" name="mdi-heart-outline"></q-icon>
                            <q-icon   size="20px" style="position: absolute; top: 2px; left: 24px; backdrop-filter: blur(5px);" name="mdi-shape-rectangle-plus"></q-icon> -->

                            <!-- <q-badge  v-if="item.status == 1" align="middle" class="q-ma-sm q-pa-xs " style="position: absolute; top: 2px; right: 0; backdrop-filter: blur(5px);" @click.stop="handleChangeStatus(item)"  outline color="cyan-4">待审核</q-badge> -->

                        </div>
                    </q-responsive>
                    <q-responsive :ratio="16 / 7">
                        <div class="column wrap bg-grey-10 q-pa-sm justify-center" @mouseleave="handleMouseStop(item)" @mouseenter="handleMousePreview(item)">
                            <div style="width: 100%" class="col-5 ellipsis" :title="item.name">
                                {{ item.name }}

                            </div>
                            <div class="row col-7 items-center justify-between">
                                <div class="row no-wrap items-center">
                                    <!-- <q-avatar class="q-mr-sm" size="20px">
                                  <img :src="item.avatar" alt="创建者" />
                              </q-avatar> -->
                                    <div class="tipsfont column" style="font-size: 10px">
                                        <div style="font-size: 10px">
                                            <q-icon class="q-mr-sm" name="mdi-clock-time-nine-outline"></q-icon>{{ item.ctime }}
                                        </div>
                                        <div style="font-size: 10px">
                                            搜索ID：{{ item.search_id }}

                                            <!-- <i class="q-mx-sm fas fa-comments"></i>
                                      {{ item.count ? item.count : "0" }} -->
                                        </div>
                                    </div>
                                </div>

                                <div class="" @click.stop>

                                    <q-btn flat round dense>
                                        <q-icon size="15px" name="fas fa-ellipsis-v"></q-icon>
                                        <q-menu>
                                            <q-list dense style="min-width: 100px">

                                                <q-item clickable v-close-popup @click="handleType(item)">
                                                    <q-item-section>
                                                        <div class="row items-center">
                                                            <q-icon class="q-mr-sm" name="mdi-folder-edit-outline" />
                                                            分类
                                                        </div>
                                                    </q-item-section>
                                                </q-item>
                                                <!-- <q-item clickable v-close-popup>
                                                    <q-item-section>
                                                        <div class="row items-center">
                                                            <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                                            重命名
                                                        </div>
                                                    </q-item-section>
                                                </q-item> -->
                                                <q-separator />
                                                <q-item v-if="isADD" clickable v-close-popup>
                                                    <q-item-section>
                                                        <div v-if="item.isLoad==0" class="row items-center" @click="handleLoadEffectToProject(item)">
                                                            <q-icon class="q-mr-sm" name="mdi-tab-plus" />
                                                            加载效果
                                                        </div>
                                                        <div v-if="item.isLoad==1" class="row items-center" @click="handleRemoveEffectFromProject(item)">
                                                            <q-icon class="q-mr-sm" name="mdi-tab-remove" />
                                                            移除效果
                                                        </div>
                                                    </q-item-section>
                                                </q-item>
                                                <!-- <q-item clickable v-close-popup>
                                                    <q-item-section>
                                                        <div class="row items-center" @click="handleDeleteEffect(item)">
                                                            <q-icon class="q-mr-sm" name="mdi-trash-can-outline" />
                                                            删除
                                                        </div>
                                                    </q-item-section>
                                                </q-item> -->
                                            </q-list>
                                        </q-menu>
                                    </q-btn>

                                </div>
                            </div>
                            <q-menu dark context-menu>

                              <q-list dense style="min-width: 100px">

                                <q-item clickable v-close-popup @click="handleType(item)">
                                    <q-item-section>
                                        <div class="row items-center">
                                            <q-icon class="q-mr-sm" name="mdi-folder-edit-outline" />
                                            分类
                                        </div>
                                    </q-item-section>
                                </q-item>
                                <!-- <q-item clickable v-close-popup>
                                    <q-item-section>
                                        <div class="row items-center">
                                            <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                            重命名
                                        </div>
                                    </q-item-section>
                                </q-item> -->
                                <q-separator />
                                <q-item v-if="isADD" clickable v-close-popup>
                                    <q-item-section>
                                        <div v-if="item.isLoad==0" class="row items-center" @click="handleLoadEffectToProject(item)">
                                            <q-icon class="q-mr-sm" name="mdi-tab-plus" />
                                            加载效果
                                        </div>
                                        <div v-if="item.isLoad==1" class="row items-center" @click="handleRemoveEffectFromProject(item)">
                                            <q-icon class="q-mr-sm" name="mdi-tab-remove" />
                                            移除效果
                                        </div>
                                    </q-item-section>
                                </q-item>
                                <!-- <q-item clickable v-close-popup>
                                    <q-item-section>
                                        <div class="row items-center" @click="handleDeleteEffect(item)">
                                            <q-icon class="q-mr-sm" name="mdi-trash-can-outline" />
                                            删除
                                        </div>
                                    </q-item-section>
                                </q-item> -->
                            </q-list>
                          </q-menu>
                        </div>
                    </q-responsive>
                </q-card>
            </div>
        </div>
        <div class="row items-center justify-center q-py-sm">

            <q-pagination v-if="total>1" v-model="pageNum" :max="total" size="25px" input input-class="text-primary" @input="handlePage" />
        </div>
    </q-card>
    <div v-if="effectList.length==0 " class="fit column flex-center text-grey" style="min-height:400px">
        <q-icon size="30px" name="mdi-note-search-outline"></q-icon>
        <span>-暂无效果-</span>
    </div>
    <q-dialog persistent fixed v-model="isTypeDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
        <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
            <q-header class="bg-grey-10 shadow-7">

                <q-toolbar>
                    <q-toolbar-title>设置分类</q-toolbar-title>
                    <q-space />

                    <q-btn dense flat icon="close" @click="handleTypeClose">
                    </q-btn>
                </q-toolbar>

            </q-header>

            <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">
                <div>
                    <q-chip v-for="item in tickedType" :key="item.et_id" removable @remove="handleRemoveTicked(item.et_id)" color="primary" text-color="white">
                        {{ item.name }}
                    </q-chip>
                </div>

                <q-toolbar inset>

                    <q-space></q-space>
                    <!-- <q-btn outline class="q-px-md q-mr-sm" @click="cancleCreateProject"> 取消</q-btn> -->
                    <q-btn outline class="q-px-md" @click="submitUpdateType"> 确认</q-btn>
                </q-toolbar>
            </q-footer>
            <q-page-container>

                <q-page v-if="curEffect" class="bg-dark  column hide-scrollbar" style="padding-top:45px">

                    <q-tree :nodes="typeList" dark ref="typeTree" node-key="et_id" label-key="name" selected-color="primary" :selected.sync="selected" tickStrategy="leaf" :ticked.sync="ticked" @update:ticked="handleTypeTicked" :default-expand-all="true" />

                    <q-page-sticky position="top" expand>
                        <div class="text-white q-pt-sm full-width bg-dark">
                            <tips-title :title="curEffect.name"></tips-title>
                        </div>
                    </q-page-sticky>

                </q-page>
            </q-page-container>

        </q-layout>

    </q-dialog>
    <q-dialog persistent fixed v-model="isLikeDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
        <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
            <q-header class="bg-grey-10 shadow-7">

                <q-toolbar>
                    <q-toolbar-title>设置喜欢</q-toolbar-title>
                    <q-space />

                    <q-btn dense flat icon="close" @click="handleLikeClose">
                    </q-btn>
                </q-toolbar>

            </q-header>

            <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">

                <span>
                    <q-breadcrumbs class="q-px-sm text-primary">
                        <q-breadcrumbs-el v-for="item in curLikeFolderPath" :key="item.elf_id" :label="item.name" @click="handleLikeSelect(item.elf_id)" class="cursor-pointer" />

                    </q-breadcrumbs>
                </span>

                <q-toolbar class="justify-between">

                    <q-space></q-space>
                    <q-btn outline class="q-px-md q-mr-sm" @click="handleCreateLikeFolder">
                        <q-icon name="mdi-folder-outline" class="q-mr-sm"></q-icon> 新建
                    </q-btn>
                    <q-btn outline class="q-px-md" @click="submitLike"> 确认</q-btn>
                </q-toolbar>
            </q-footer>
            <q-page-container>

                <q-page v-if="curEffect" class="bg-dark  column hide-scrollbar" style="padding-top:45px">
                    <likefolder-tree ref="likeFolderTree" @curFolder="handleCurFolder"></likefolder-tree>

                    <q-page-sticky position="top" expand>
                        <div class="text-white q-pt-sm full-width bg-dark">
                            <tips-title :title="curEffect.name"></tips-title>
                        </div>
                    </q-page-sticky>

                </q-page>
            </q-page-container>

        </q-layout>

    </q-dialog>
    <q-dialog persistent fixed v-model="isCollectionDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
        <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
            <q-header class="bg-grey-10 shadow-7">

                <q-toolbar>
                    <q-toolbar-title>设置项目收藏</q-toolbar-title>
                    <q-space />

                    <q-btn dense flat icon="close" @click="handleCollectionClose">
                    </q-btn>
                </q-toolbar>

            </q-header>

            <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">

                <span>
                    <q-breadcrumbs class="q-px-sm text-primary">
                        <q-breadcrumbs-el v-for="item in curCollectionFolderPath" :key="item.ecf_id" :label="item.name" @click="handleCollectionSelect(item.ecf_id)" class="cursor-pointer" />

                    </q-breadcrumbs>
                </span>

                <q-toolbar class="justify-between">

                    <q-space></q-space>
                    <q-btn outline class="q-px-md q-mr-sm" @click="handleCreateCollectionFolder">
                        <q-icon name="mdi-folder-outline" class="q-mr-sm"></q-icon> 新建
                    </q-btn>
                    <q-btn outline class="q-px-md" @click="submitCollection"> 确认</q-btn>
                </q-toolbar>
            </q-footer>
            <q-page-container>

                <q-page v-if="curEffect" class="bg-dark  column hide-scrollbar" style="padding-top:45px">
                    <collectionfolder-tree ref="collectionFolderTree" @curFolder="handleCurFolder"></collectionfolder-tree>

                    <q-page-sticky position="top" expand>
                        <div class="text-white q-pt-sm full-width bg-dark">
                            <tips-title :title="curEffect.name"></tips-title>
                        </div>
                    </q-page-sticky>

                </q-page>
            </q-page-container>

        </q-layout>

    </q-dialog>

    <q-dialog persistent no-refocus fixed v-model="isPreviewDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
        <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
            <q-header class="bg-grey-10 shadow-7">

                <q-toolbar>
                    <q-toolbar-title>效果详情</q-toolbar-title>
                    <q-space />

                    <q-btn dense flat icon="close" @click="handlePreviewDialogClose">
                    </q-btn>
                </q-toolbar>

            </q-header>
            <q-page-container>
                <q-page v-if="curEffect" class="bg-dark row hide-scrollbar">

                    <q-card flat style="width: 100%" class="back-dark column q-pa-none">

                        <q-card-section class="q-pa-none">

                            <video class="full-width" ref="previewVideo" :src="curEffect.effectPath+'/preview.mp4'" controls autoplay></video>

                        </q-card-section>

                        <q-card-section class="q-pa-none">
                            <tips-title :title="curEffect.name"></tips-title>
                            <div class="q-pa-sm">
                                <q-list padding>
                                    <q-item-label header class="text-teal-6">基本信息</q-item-label>
                                    <q-item v-ripple dense>
                                        <q-item-section side class="text-grey-6">
                                            <div class="row" style="min-width: 80px; max-width: 100px">
                                                文件大小
                                            </div>
                                        </q-item-section>
                                        <q-item-section>
                                            {{ (curEffect.size/1024/1024).toFixed(2) + 'MB' }}
                                        </q-item-section>
                                    </q-item>
                                    <q-item-label header class="text-teal-6">预览图</q-item-label>
                                    <q-item>
                                        <q-img contain class="full-width" :src="curEffect.effectPath+'/poster.jpg'">

                                        </q-img>
                                    </q-item>

                                </q-list>
                            </div>
                        </q-card-section>

                    </q-card>

                </q-page>
            </q-page-container>

        </q-layout>

    </q-dialog>

    <video ref="video" style="display:none" muted :src="curVideo"></video>
    <q-inner-loading :showing="isLoading" class="bg-grey-10">
        <q-spinner-cube color="primary" size="50px" class="q-mb-sm" />
        数据加载中……
    </q-inner-loading>
</div>
</template>

<script>
import {
    loadEffectList,
    deleteEffect,
    updateEffectType,

    addEffectLike,
    removeEffectLike,
    loadLikeFolderEffectList,

    addEffectCollection,
    removeEffectCollection,
    loadCollectionFolderEffectList,

    loadEffectToProject,
    removeEffectFromProject

} from "assets/api/studio/effect"

export default {
    name: 'EffectList',
    components: {
        LikefolderTree: () => import('components/studio/effect/LikefolderTree.vue'),
        CollectionfolderTree: () => import('components/studio/effect/CollectionfolderTree.vue')
    },

    props: {

        scrollStyle: {
            type: Object,

        },
        typeList: {
            type: Array
        },
        isPlay: {
            default: false
        },
        isADD: {
            default: false
        },
        tab: {
            type: String,
            default: 'library'
        },
        sortType: {
            type: String,
            default: 'ctime'
        }

    },
    data() {
        return {
            effectList: [],
            pid: '',
            isTypeDialog: false,
            isRenameDialog: false,
            isLikeDialog: false,
            isCollectionDialog: false,
            curItem: {
                name: '',
                index: ''
            },
            curType: 0,
            curVideo: '',
            pageNum: 1,
            pageSize: 24,
            total: 0,
            isPreviewDialog: false,
            curEffect: null,
            isLoading: true,

            curLikeFolder: {
                elf_id: 0,
                name: '全部'
            },
            curLikeFolderPath: [{
                elf_id: 0,
                name: '全部',
            }],

            curCollectionFolder: {
                ecf_id: 0,
                name: '全部'
            },
            curCollectionFolderPath: [{
                ecf_id: 0,
                name: '全部',
            }],

            selected: [],
            ticked: [],
            tickedType: [],
            typeDrawer: true,
            searchName: '',
            elf_id: 0,
            ecf_id: 0,

        }
    },
    mounted() {
        this.pid = this.$route.params.pid;
        this.handleLoadEffectList()

    },
    watch: {
        // effectList: function (val) {
        //     this.childEffectList = val
        // }
    },
    methods: {
        handleLoadEffectToProject(item) {

            let projectInfo = this.$storage.getItem(this.pid);
            let projectFolder = projectInfo.project_id + projectInfo.name
            let projectEffectPath = `/${projectFolder}/03_效果制作`
            if (item.isLoad == 0) {
                this.$q.loading.show()
                loadEffectToProject({
                    path: item.path,
                    projectEffectPath,
                    name: item.rawname,
                    ec_id: item.ec_id
                }).then(res => {
                    this.$q.loading.hide()
                    console.log(res);
                    if (res.data.code == 1) {
                        this.$message.success('加载至项目成功！')

                        item.isLoad = 1

                    } else {
                        this.$message.error('加载至项目失败！')
                    }
                })

                // loadToProject({
                //     name: item.name,
                //     projectPath: projectInfo.project_id + projectInfo.name,
                //     mc_id: item.mc_id,
                //     effectPath: item.effectPath
                // }).then(res => {
                //     console.log(res);
                //     if (res.data.code == 1) {
                //         this.$message.success('加载至项目成功！')

                //         this.childEffectList[index].isLoad = 1

                //     } else {
                //         this.$message.error('加载至项目失败！')
                //     }
                // })

            }

        },
        handleRemoveEffectFromProject(item) {

            this.$q
                .dialog({
                    title: "提示",
                    message: "确认从项目移除该效果吗？",
                    cancel: true,
                    persistent: true,
                    dark: true
                })
                .onOk(() => {
                    let projectInfo = this.$storage.getItem(this.pid);
                    console.log(this.pid,projectInfo);
                    let projectFolder = projectInfo.project_id + projectInfo.name
                    let projectEffectPath = `/${projectFolder}/03_效果制作`
                    removeEffectFromProject({
                        path: item.path,
                        projectEffectPath,
                        name: item.rawname,
                        ec_id: item.ec_id
                    }).then(res => {

                        if (res.data.code == 1) {
                            this.$message.success('移除效果成功！')

                            item.isLoad = 0

                        } else {
                            this.$message.error('移除效果失败！')
                        }
                    })
                })

                .onCancel(() => {
                    // console.log('>>>> Cancel')
                })
                .onDismiss(() => {
                    // console.log('I am triggered on both OK and Cancel')
                });
        },

        //////喜欢部分

        handleCreateLikeFolder() {

            this.$refs.likeFolderTree.handleCreateLikeFolder()
        },

        handleLike(item, index) {
            this.curEffect = item
            this.isLikeDialog = true
        },
        handleLikeClose() {
            this.curEffect = null;
            this.isLikeDialog = false;

            this.curLikeFolder = {
                elf_id: 0,
                name: '全部'
            }
            this.curLikeFolderPath = [{
                elf_id: 0,
                name: '全部',
            }]
        },

        handleLikeSelect(id) {
            this.$refs.collectionFolderTree.handleCollectionSelect(id)

        },
        handleCurFolder(curLikeFolder, curLikeFolderPath) {
            this.curLikeFolder = curLikeFolder;
            this.curLikeFolderPath = curLikeFolderPath;
        },
        submitLike() {
            addEffectLike({
                effect_id: this.curEffect.effect_id,
                elf_id: this.curLikeFolder.elf_id
            }).then(res => {
                if (res.data.code == 1) {
                    let data = res.data.data
                    console.log(data);
                    this.curEffect.el_id = data.insertId
                    this.handleLikeClose()
                    this.$message.success('喜欢成功！')
                } else {
                    this.$message.error('喜欢失败！')
                }
            })
        },
        handleRemoveLike(item) {
            removeEffectLike({
                el_id: item.el_id
            }).then(res => {
                if (res.data.code == 1) {
                    this.$message.success('取消喜欢成功！')
                    item.el_id = null
                } else {
                    this.$message.error('取消喜欢失败！')
                }
            })
        },

        ///////项目收藏部分
        handleCreateCollectionFolder() {

            this.$refs.collectionFolderTree.handleCreateCollectionFolder()
        },

        handleCollection(item, index) {
            this.curEffect = item
            this.isCollectionDialog = true
        },
        handleCollectionClose() {
            this.curEffect = null;
            this.isCollectionDialog = false;

            this.curCollectionFolder = {
                ecf_id: 0,
                name: '全部'
            }
            this.curCollectionFolderPath = [{
                ecf_id: 0,
                name: '全部',
            }]
        },

        handleCollectionSelect(id) {
            this.$refs.collectionFolderTree.handleCollectionSelect(id)

        },
        handleCurFolder(curCollectionFolder, curCollectionFolderPath) {
            this.curCollectionFolder = curCollectionFolder;
            this.curCollectionFolderPath = curCollectionFolderPath;
        },
        submitCollection() {
            addEffectCollection({
                effect_id: this.curEffect.effect_id,
                ecf_id: this.curCollectionFolder.ecf_id,
                pid: this.pid
            }).then(res => {
                if (res.data.code == 1) {
                    let data = res.data.data
                    console.log(data);
                    this.curEffect.ec_id = data.insertId
                    this.handleCollectionClose()
                    this.$message.success('项目收藏成功！')
                } else {
                    this.$message.error('项目收藏失败！')
                }
            })
        },
        handleRemoveCollection(item) {
            removeEffectCollection({
                ec_id: item.ec_id,
                pid: this.pid
            }).then(res => {
                if (res.data.code == 1) {
                    this.$message.success('取消项目收藏成功！')
                    item.ec_id = null
                } else {
                    this.$message.error('取消项目收藏失败！')
                }
            })
        },

        ///////特效库部分
        handleUpdateType() {
            console.log(this.curItem, this.curType);
            updateMusicType({
                type: this.curType,
                music_id: this.curItem.music_id
            }).then(res => {
                console.log(res);
                if (res.data.code == 1) {
                    this.$message.success('设置分类成功！')
                    this.childEffectList[this.curItem.index].type = this.curType
                    this.curType = []
                    this.isTypeDialog = false

                } else {
                    this.$message.error('设置分类失败！')
                }
            })

        },
        handleTypeInput() {

        },
        handleRenameDialog(item, index) {
            this.curName.name = item.name;
            this.curName.music_id = item.music_id;
            this.curName.index = index
            this.isRenameDialog = true;

        },
        handleRenameClose() {
            this.curName = {
                name: '',
                music_id: '',
                index: null,
            };
            this.isRenameDialog = false;
        },
        handleRename() {

            updateMusicName({
                name: this.curName.name,
                music_id: this.curName.music_id
            }).then(res => {
                console.log(res);
                if (res.data.code == 1) {
                    this.$message.success('重命名成功！')
                    this.childEffectList[this.curName.index].name = this.curName.name
                    this.handleRenameClose()

                } else {
                    this.$message.error('重命名失败！')
                }
            })

        },

        handleDeleteEffect(item) {
            var vm = this;
            this.$q.dialog({
                dark: true,
                title: '提示',
                message: '是否删除该效果？',
                cancel: true,
            }).onOk(() => {
                let reqdata = {
                    effect_id: item.effect_id,
                    effectPath: item.effectPath.replace(vm.GLOBAL.serveurl + '/effectdata', '')
                }
                deleteEffect(reqdata).then(res => {
                    if (res.data.code == 1) {
                        vm.$message.success('删除成功！')
                        vm.handleLoadEffectList()
                    } else {
                        vm.$message.error('删除失败！')
                    }
                })
                // deletePlanEvent({
                //     pid: this.pid,
                //     plan_id: ob.event.id
                // }).then(res => {
                //     ob.event.remove();
                //     vm.handleLoadPlanList()
                // })
            }).onCancel(() => {
                // //console.log('Cancel')
            }).onDismiss(() => {
                // //console.log('I am triggered on both OK and Cancel')
            })
        },
        handleType(item, index) {
            this.curEffect = item;
            console.log(item);

            this.isTypeDialog = true;
            setTimeout(() => {
                if (item.type.length > 0) {
                    let type = this.$refs.typeTree
                    type.setTicked(item.type, true)
                }
            }, 500);
        },
        handleTypeClose() {
            this.isTypeDialog = false;
            this.curEffect = null;
            this.ticked = [];
            this.tickedType = []
        },
        handleTypeTicked(t) {
            console.log(this.ticked);
            let type = this.$refs.typeTree
            let ticked = this.ticked
            let arr = []
            ticked.forEach(i => {
                let obj = type.getNodeByKey(i)
                arr.push(obj)
            })

            console.log(arr);
            this.tickedType = arr
        },
        handleRemoveTicked(et_id) {
            console.log('remove', et_id);
            let type = this.$refs.typeTree
            let arr = []
            arr.push(et_id)
            type.setTicked(arr, false)
        },
        submitUpdateType(t) {
            updateEffectType({
                effect_id: this.curEffect.effect_id,
                type: this.ticked
            }).then(res => {
                if (res.data.code == 1) {
                    this.$message.success('设置分类成功！')
                    this.curEffect.type = this.ticked
                    this.handleTypeClose()
                } else {
                    this.$message.error('设置分类失败！')
                }
            })

        },
        handleRating(item) {

        },
        handlePreview(item) {
            item.isPreview = true;
            item.previewLoading = true;

            this.curVideo = item.effectPath + '/preview.mp4'
            var canvas = this.$refs[item.effect_id][0];
            let poster = this.$refs.previewContainer[0].$el;
            canvas.width = poster.clientWidth;
            canvas.height = poster.clientHeight;

            var video = this.$refs.video;

            setTimeout(() => {
                video.width = poster.clientWidth;
                video.height = poster.clientHeight;
                video.playbackRate = 2.0
                video.play();

                video.addEventListener('play', () => {
                    item.previewLoading = false;
                    var context = canvas.getContext("2d");
                    // let poster = this.$refs.poster[0].$el;
                    this.i = setInterval(function () {
                        context.drawImage(video, 0, 0, poster.clientWidth, poster.clientHeight);
                    }, 20);

                })
            }, 500);

        },
        handleStop(item) {
            item.isPreview = false;
            item.previewLoading = false;

            clearInterval(this.i)
        },
        handleMousePreview(item) {
            if (this.$platform.inDesktop()) {
                console.log('mousepreview');
                this.handlePreview(item)
            }
        },
        handleMouseStop(item) {
            if (this.$platform.inDesktop()) this.handleStop(item)
        },
        handlePhonePreview(item) {
            if (this.preItem) {
                this.handleStop(this.preItem);
                this.preItem = null;
            }
            this.preItem = item;

            this.handlePreview(item);

        },
        handlePreviewDialog(item) {
            this.handleStop(item)
            this.curEffect = item;
            this.isPreviewDialog = true;
            setTimeout(() => {
                let video = this.$refs.previewVideo;
                let width = video.clientWidth;
                video.height = width / 16 * 9;
            }, 500);

        },
        handlePreviewDialogClose() {

            this.curEffect = null;
            this.isPreviewDialog = false;

        },
        handlePhoneStop(item) {
            this.handleStop(item);
        },
        handleLoadEffectList() {
            if (this.tab == "library") {
                let reqData = {
                    pid: this.pid,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    sortType: this.sortType,
                    type: this.curType,
                    searchName: this.searchName

                }
                this.effectList = []
                loadEffectList(reqData).then(res => {
                    if (res.data.code == 1) {
                        let data = res.data.data;
                        if (data.length > 0) {
                            this.total = Math.ceil(data[0].count / this.pageSize);
                            console.log(data, 'effectlist');
                            data.forEach(i => {
                                i.ctime = this.$moment(i.ctime, 'x').format('YYYY-MM-DD HH:mm')
                                i.effectPath = this.GLOBAL.serveurl + '/effectdata' + i.path;
                                i.isPreview = false;
                                i.previewLoading = false;
                                if (i.type != null) {
                                    i.type = JSON.parse(i.type)
                                } else {
                                    i.type = []
                                }

                            })
                            this.effectList = data
                            this.isLoading = false
                        } else {
                            this.total = 0
                            this.effectList = []
                            this.isLoading = false
                        }

                    }
                })
            }
            if (this.tab == 'like') {
                let reqData = {
                    elf_id: this.elf_id,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    searchName: this.searchName

                }
                loadLikeFolderEffectList(reqData).then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        let data = res.data.data;
                        if (data.length > 0) {
                            this.total = Math.ceil(data[0].count / this.pageSize);
                            console.log(data, 'effectlist');
                            data.forEach(i => {
                                i.ctime = this.$moment(i.ctime, 'x').format('YYYY-MM-DD HH:mm')
                                i.effectPath = this.GLOBAL.serveurl + '/effectdata' + i.path;
                                i.isPreview = false;
                                i.previewLoading = false;
                                if (i.type != null) {
                                    i.type = JSON.parse(i.type)
                                } else {
                                    i.type = []
                                }

                            })
                            this.effectList = data
                            this.isLoading = false
                        } else {
                            this.total = 0
                            this.effectList = []
                            this.isLoading = false
                        }

                    }
                })
            }
            if (this.tab == 'collection') {
                let reqData = {
                    ecf_id: this.ecf_id,
                    pid: this.pid,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    searchName: this.searchName

                }
                loadCollectionFolderEffectList(reqData).then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        let data = res.data.data;
                        if (data.length > 0) {
                            this.total = Math.ceil(data[0].count / this.pageSize);
                            console.log(data, 'effectlist');
                            data.forEach(i => {
                                i.ctime = this.$moment(i.ctime, 'x').format('YYYY-MM-DD HH:mm')
                                i.effectPath = this.GLOBAL.serveurl + '/effectdata' + i.path;
                                i.isPreview = false;
                                i.previewLoading = false;
                                if (i.type != null) {
                                    i.type = JSON.parse(i.type)
                                } else {
                                    i.type = []
                                }

                            })
                            this.effectList = data
                            this.isLoading = false
                        } else {
                            this.total = 0
                            this.effectList = []
                            this.isLoading = false
                        }

                    }
                })
            }

        },
        handlePage(num) {
            this.pageNum = num
            this.handleLoadEffectList()

        },

    }

}
</script>

<style scoped>
.name {
    white-space: nowrap;
}

.name.scroll {
    animation: 8s wordsLoop linear infinite;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(calc(100%));
    }

    50% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(calc(-100%));
    }
}
</style>
